<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员手机APP布局</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
    }
    .header {
        background-color: #007bff;
        color: #fff;
        padding: 16px;
        position: relative;
    }
    .search-bar {
        padding: 8px;
        margin-bottom: 16px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 20px;
        border: none;
        outline: none;
    }
    .main-content {
        padding: 15px;
        background: #ffffff;
        margin-bottom: 60px; /* Space for bottom navbar */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-gap: 20px;
    }
    .function-card {
        background-color: #e9eff7;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .function-card i {
        font-size: 24px;
        margin-bottom: 10px;
        color: #007bff;
    }
    .function-card h3 {
        margin: 5px 0;
        color: #007bff;
        font-size: 16px;
    }
    .function-card button {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    .bottom-nav {
        background-color: #2c3e50;
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    }
    .bottom-nav a {
        color: white;
        text-decoration: none;
        text-align: center;
        display: block;
        padding: 5px;
        border-radius: 3px;
        font-size: 16px;
    }
    @media (max-width: 768px) {
        .main-content {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }
    }
</style>
</head>
<body>

<div class="header">
    <input type="search" class="search-bar" placeholder="搜索...">
    <!-- Other header content like calendar can go here -->
</div>

<div class="main-content">
    <div class="function-card">
        <i class="icon">📚</i>
        <h3>发布资料</h3>
        <button>上传</button>
    </div>
    <div class="function-card">
        <i class="icon">📢</i>
        <h3>发布通知</h3>
        <button>发布</button>
    </div>
    <div class="function-card">
        <i class="icon">📝</i>
        <h3>发布文章</h3>
        <button>创建</button>
    </div>
    <div class="function-card">
        <i class="icon">🔐</i>
        <h3>权限管理</h3>
        <button>管理</button>
    </div>
</div>

<div class="bottom-nav">
    <a href="#">首页</a>
    <a href="#">资料</a>
    <a href="#">通知</a>
    <a href="#">更多</a>
</div>

</body>
</html>
